<template>
  <div>
    <div class="radius" @click="showPopup()">
        <van-icon class="jia" name="plus" size="3rem" color="#cccccc" />
      </div>
    <!-- 举报 -->
    <el-dialog
      :visible.sync="touTiaodialogVisible"
      width="35%"
      class="toutiao-message"
      :show-close="false"
      :center="true"
    >
      <div class="toutiao-message-con">
        <span @click="contentLike()">收藏</span><br />
        <br />
        <span @click="touTiaoJuBao()">举报</span>
      </div>
    </el-dialog>
    <!-- 收藏 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <div class="collectTouTiaoTopAll">
        <div class="collectTouTiaoTop">
          <span>选择收藏夹</span>
        </div>
        <hr />
        <div class="collectTouTiaoTopCon">
          <div class="collectTouTiaoTopCon-con">默认收藏单</div>
          <div class="collectTouTiaoTopCon-con">我的喜欢</div>
          <van-radio-group v-model="radio" class="danxuankuang">
            <van-radio
              name="1"
              shape="square"
              class="danxuankuang-item"
            ></van-radio>
            <van-radio
              name="2"
              shape="square"
              class="danxuankuang-item"
            ></van-radio>
          </van-radio-group>
        </div>

        <van-button
          type="default"
          size="large"
          class="collectTouTiaoTopConAlaery"
          @click="collectTouTiaoTopAlaery()"
          >完成</van-button
        >
      </div>
    </van-popup>
   
      <div class="con">
      <router-link to="/">
        <van-icon name="arrow-left" class="topIcon" size="3rem" />
      </router-link>
      <div class="toutiaoTop">话题</div>
</div>
 <div class="top">
      <div>
        <van-image
          width="5rem"
          height="5rem"
          fit="cover"
          src="topic.topic_image_road"
          class="imgFirst"
        />
        <span class="topic_name">{{ topic.topic_name }}</span
        ><br />
        <div class="hot">{{ topic.topic_hot_number }}热度</div>
        <div class="topic_discussion_number">
          {{ topic.topic_discussion_number }}讨论量
        </div>
        <van-button
          v-show="focusButton"
          round
          type="info"
          size="small"
          class="first"
          @click="focusThem()"
          color="#248BB7"
          >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
        </van-button>
        <van-button
          v-show="!focusButton"
          color="#035D81"
          round
          type="info"
          size="small"
          class="first"
          @click="focusThem()"
          >已&nbsp;&nbsp;关&nbsp;&nbsp;注</van-button
        >

        <div class="topic_details">{{ topic.topic_details }}</div>
      </div>
 </div>
      <div class="content">
        <div
          class="heart_banner2"
          v-for="(item, index) in topicContent"
          :key="index"
          @click="toutiaoTextDetail(item)"
        >
          <div class="con1" @click="toutiaoTextDetail(item)">
            <van-image
              round
              width="5rem"
              height="5rem"
              :src="item.user_image_road"
              class="toutiaoUserImg"
              fit="cover"
            />
            <!-- 收藏 -->
            <van-icon
              name="arrow-down"
              class="unfold"
              @click="collentThis(item)"
            />
            <div class="toutiaoUserName">{{ item.user_name }}</div>
            <div class="toutiaoTime">{{ item.topic.topic_date }}</div>
            <div class="toutiaoText">{{ item.topic.topic_text }}</div>
<br/>
            <div
              v-for="(items, index) in item.topic.images"
              :key="index"
              class="textImg"
            >
                <el-image 
    style="width: 100px; height: 100px"
    :src="items.topic_photo_road" 
    :preview-src-list="item.imageRoad"
    class="imgFirst">
  </el-image>
            </div>
          </div>
          <div class="icon">
            <img
              v-show="item.show"
              src="/static/images/heartBefore(0).png "
              alt=""
              width="15rem"
              @click="giveLikes(item, index)"
              class="iconA"
            />
            <img
              v-show="!item.show"
              src="/static/images/heartBefore(1).png"
              alt=""
              width="14rem"
              @click="giveLikes(item, index)"
              class="iconA"
            />
            <span class="discuss">{{ item.topic.topic_likes }}</span>
            <van-icon
              name="chat-o"
              size="1.5rem"
              class="iconA"
              @click="toutiaoTextDetail(item)"
            />
            <span class="discuss" @click="toutiaoTextDetail(item)">{{
              item.num
            }}</span>
          </div>
        </div>
        <div class="footLast"></div>
      </div>
  </div>
</template>
<script>
import util from '../../util/index';
import http from '../../api/index'
export default {
  data() {
    return {
      topic: [],
      focusButton: true,
      topicContent: [],
      chooseItem: [],
      touTiaodialogVisible: false,
      radio: '1',
      show: false,
    };
  },
  methods: {
    
    showPopup() {
      this.$router.push('/dynamic/'+this.$route.params.id);
    },
    //收藏完成
    collectTouTiaoTopAlaery() {
      this.show = false;
      this.$message({
        type: 'success',
        message: '收藏成功!',
      });
    },
    //收藏底部菜单栏
    contentLike() {
      this.touTiaodialogVisible = false;
      this.show = true;
    },
    // 收藏
    collentThis(item) {
      this.chooseItem = item;
      this.touTiaodialogVisible = true;
      event.stopPropagation();
    },
    // 点赞
    giveLikes(item, index) {
      this.showAdd = !this.showAdd;
      console.log('topoic',item.topic);
      item.show = !item.show;
      if (item.show === true) {
        item.topic_likes = item.topic_likes - 1;
      } else {
        item.topic_likes = item.topic_likes + 1;
        util
          .getDynamicLikes({
            discuss_record_id: item.topic_record_id,
          })
          .then((r) => {
            console.log(r);
          });
      }
      event.stopPropagation();
      this.$forceUpdate();
    },
    /* 话题跳页面详情 */
     toutiaoTextDetail(item) {
      console.log('item', item);
      sessionStorage.setItem('item', item);
      //this.$router.push
      this.$router.push('/topicDetail/'+topic.topic_id+'/topReport/' + item.topic.topic_id);
      event.stopPropagation();
    },
    //关注
    focusThem() {
      this.focusButton = !this.focusButton;
      event.stopPropagation();
    },
  },
  mounted() {
    util.getTopicContentAll().then((res) => {
      console.log('huati', res);
      for (let i = 0; i < res.data.length; i++) {
        if (this.$route.params.id == res.data[i].topic_id) {
          this.topic = res.data[i];
        }
      }
      util
        .getTopicByTopicId({
          topic_id: this.topic.topic_id,
          pages: 1,
        })
        .then((res) => {
          console.log('话题内容', res);
          this.topicContent = res.data;
          console.log(this.topic);
          for (let i = 0; i < this.topicContent.length; i++) {
            this.topicContent[i].show = true;
          }
        });
    });
  },
};
</script>
<style scoped>
.radius {
  width: 5rem;
  height: 5rem;
  background-color: rgb(108, 144, 243);
  border-radius: 50%;
  position: fixed;
  bottom: 8.6rem;
  right: 2.2rem;
}
.jia {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.top {
  height: 22rem;
  width: 100%;
  background-color: rgb(8, 111, 152);
  margin: 0px;
}
.topIcon {
  color: white;
  margin-top: 1rem;
}
.toutiaoTop {
  font-size: 2rem;
  line-height: 5rem;
  color: white;
  position: relative;
 top: -0.8rem;
  display: inline-block;
  
}
.imgFirst {
  vertical-align: top;
  margin-left: 1rem;
}
.hot {
  display: inline-block;
  position: relative;
  left: 6rem;
  top: -2rem;
  font-size: 1.5rem;
  color: rgb(200, 200, 200);
}
.topic_discussion_number {
  display: inline-block;
  position: relative;
  left: 7rem;
  top: -2rem;
  font-size: 1.5rem;
  color: rgb(200, 200, 200);
}
.topic_name {
  font-size: 1.7rem;
  color: white;
}
.topic_details {
  font-size: 1.5rem;
  color: rgb(228, 224, 224);
  margin-left: 1rem;
}
.first {
  position: relative;
  left: 20rem;
  top: -4rem;
}

.heart_banner2 {
  width: 90%;
  margin: 0 auto;
  /* height: 20rem; */
  border-radius: 1.5rem;
  background-color: white;
  /* margin-bottom: 1.5rem; */
  padding: 1rem;
  margin-top: 1.5rem;
  position: relative;
  top: -10rem;
}
.toutiaoUserImg {
  display: inline-block;
}
.unfold {
  position: relative;
  top: -2.5rem;
  left: 27rem;
}
.toutiaoUserName {
  display: inline-block;
  position: relative;
  top: -3rem;
  font-size: 1.5rem;
  margin-left: -1rem;
  margin-top: -5rem;
}
.toutiaoText {
  font-size: 1.5rem;
  display: inline-block;
  text-overflow: ellipsis;
  margin-top: 2rem;
  margin-bottom: 1rem;
  margin-left: 0.5rem;
}
.toutiaoTime {
  font-size: 1rem;
  margin-left: 5.9rem;
  margin-top: -2.5rem;
  color: gray;
}
.toutiaoUserImg {
  display: inline-block;
}
.textImg {
  display: inline-block;
  margin-left: 2rem;
  margin-top: 2rem;
}
.icon {
  padding-left: 2rem;
}
.toutiao-message {
  margin-top: 24rem;
}
.toutiao-message-con {
  margin-top: -4.5rem;
  font-size: 1.8rem;
  padding-left: 2rem;
  margin-bottom: -1rem;
}
.collectTouTiaoTopAll {
  font-size: 2rem;
}
.collectTouTiaoTopCon {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
.danxuankuang {
  margin-left: 32rem;
  margin-top: -7.3rem;
}
.danxuankuang-item {
  margin-bottom: 2rem;
}
.collectTouTiaoTopCon-con {
  margin-bottom: 1rem;
}
.collectTouTiaoTopConAlaery {
  position: fixed;
  bottom: 0rem;
}
.discuss {
  font-size: 1.5rem;
  color: gray;
  position: relative;
  top: 1rem;
}
.iconA{
  position: relative;
  top: 1rem;
}
.con{
  position: sticky;
  top: 0rem;
  background-color: rgb(8, 111, 152);
  z-index: 10000;
}
</style>